<template>
	<view>
		<view class="itemPic">
			<image class="itemPic" src="../../static/img/quote.png"></image>
		</view>
		<view>
			<view class="content">
				<text class="text">所在地区</text>
				<view class="button">
					<pickerAddress @change="change">{{address}}></pickerAddress>
				</view>
				<hr></hr>
			</view>
			<view class="content">
				<text class="text">房屋面积</text>
				<view class="button">
					<view @tap="handleTap1('picker3')">{{ area }}㎡</view>
					<lb-picker ref="picker3"
					  v-model="area"
					  mode="selector"
					  :list="areaList"
					  :column-num="7"
					  @change="handleChange1"
					  @confirm="handleConfirm1"
					  @cancle="handleCancle1">
					</lb-picker>
				</view>
				<hr></hr>
			</view>
			<view class="content">
				<text class="text">装修风格</text>
				<view class="button">
					<view @tap="handleTap2">{{type}}</view>
					<lb-picker ref="picker"
					  v-model="type"
					  mode="selector"
					  :list="typeList"
					  :props="pickerProp"
					  @change="handleChange2"
					  @confirm="handleConfirm2"
					  @cancle="handleCancle2">
					</lb-picker>
				</view>
				<hr></hr>
			</view>
			<view class="content">
				<text class="text">户型选择</text>
				<view class="button">
					<view @tap="handleTap3('picker1')">{{houseType}}</view>
					<lb-picker ref="picker1"
					  v-model="houseType"
					  mode="selector"
					  :list="houseList"
					  :props="pickerProp1"
					  @change="handleChange3"
					  @confirm="handleConfirm3"
					  @cancle="handleCancle3">
					</lb-picker>
				</view>
				<hr></hr>
			</view>
			<view>
				<button @click="budget">免费获取报价</button>
			</view>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue'
	export default {
		components:{
			pickerAddress
		},
		data() {
			return {
				address: '选择地址',
				area:0,
				areaList: [],
				type:'装修风格',
				pickerProp: {
					label: 'name',
					value: 'name'
				},
				typeList: [
					{
						name: '田园风格',
						price:8
					},{
						name: '中式风格',
						price:9
					},{
						name: '地中海风格',
						price:12
					},{
						name: '美式风格',
						price:10
					}
				],
				houseType:'户型选择',
				pickerProp1: {
					label: 'name',
					value: 'name'
				},
				houseList: [
					{
						name: '1室1厅1卫',
						price:20
					},{
						name: '2室1厅1卫',
						price:25
					},{
						name: '2室2厅1卫',
						price:30
					},{
						name: '3室2厅1卫',
						price:35
					},{
						name: '4室2厅2卫',
						price:40
					},{
						name: '5室2厅3卫',
						price:45
					}
				]
			}
		},
		created() {
			let areaList = []
			for (let i = 60; i < 200; i++) {
				areaList.push({
					label: `${i}㎡`,
					value: i
				})
			}
			this.areaList = areaList
		},
		methods: {
			budget(){
				if(this.address === '选择地址'){
					uni.showToast({
						icon:'loading',
					    title: '请选择地区',
					    duration: 300
					});
					return;
				}else if(this.area === 0){
					uni.showToast({
						icon:'loading',
					    title: '请选择房屋面积',
					    duration: 300
					});
					return;
				}else if(this.type === '装修风格'){
					uni.showToast({
						icon:'loading',
					    title: '请选择装修风格',
					    duration: 300
					});
					return;
				}else if(this.houseType === '户型选择'){
					uni.showToast({
						icon:'loading',
					    title: '请选择户型',
					    duration: 300
					});
					return;
				}
				let tatolPrice = 140;
				console.log(this.address);
				for(var i=0; i<this.houseList.length;i++){
					if(this.houseList[i].name === this.houseType){
						console.log(this.houseList[i].price);
						tatolPrice = tatolPrice + this.houseList[i].price;
					}
				}
				tatolPrice = tatolPrice * this.area;
				for(var i=0; i<this.typeList.length;i++){
					if(this.typeList[i].name === this.type){
						console.log(this.typeList[i].price);
						tatolPrice = tatolPrice * this.typeList[i].price;
					}
				}
				
				uni.navigateTo({
					url:'result/result?price='+tatolPrice+'&area='+this.area
				})
			},
			change(data){
				this.address = data.data.join('')
			},
			handleTap1 (picker) {
				this.$refs[picker].show()
			},
			handleChange1 (item) {
				// console.log('change::', item)
			},
			handleConfirm1 (item) {
				this.label = item.item.label
				console.log('confirm::', item)
			},
			handleCancle1 (item) {
				console.log('cancle::', item)
			},
			handleTap2 () {
				this.$refs.picker.show()
			},
			handleChange2 (item) {
				// console.log('change::', item)
			},
			handleConfirm2 (item) {
				this.label = item.item.label
				console.log('confirm::', item)
			},
			handleCancle2 (item) {
				console.log('cancle::', item)
			},
			handleTap3 (picker) {
				this.$refs[picker].show()
			},
			handleChange3 (item) {
				// console.log('change::', item)
			},
			handleConfirm3 (item) {
				this.label = item.item.label
				console.log('confirm::', item)
			},
			handleCancle3 (item) {
				console.log('cancle::', item)
			}
		}
	}
</script>

<style>
	.itemPic{
		width: 100%;
		height: 130px;
		margin-bottom: 20px;
	}
	.content{
		margin-bottom: 20px;
	}
	.text{
		float: left;
		margin-left: 20px;
	}
	.button{
		float: right;
		margin-right: 20px;
	}
	hr{
		margin: 30px auto;
		width: 95%;
	}
	button{
		width: 90%;
		background-color: #FF4B87;
		color: #ffffff;
	}
</style>
